<template>
  <!-- 新手任务 -->
  <view>
    <view class="task-box">
      <image src="../../static/task.png" mode=""></image>
    </view>
    <view class="renwu-title">新手任务</view>
    <view class="renwu-list">
      <view class="renwu-left">
        fksjl
      </view>
      <view class="renwu-con">
        <view class="">
          <view class="">邀请好友注册</view>
          <view class="zhuce">成功邀请一位好友注册</view>
          <text class="vtn-text">+2VTN</text>
        </view>
        <view class="">
          <u-button type="primary" size="mini" shape="circle" :plain="true">去完成</u-button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {

      }
    },
    methods: {

    }
  }
</script>

<style>
  page {
    background-color: #131a2a;
  }

  .task-box {
    height: 400rpx;
    border-radius: 0 0 20rpx 20rpx;
    overflow: hidden;
  }

  .task-box image {
    width: 100%;
    height: 100%;
  }

  .renwu-title {
    margin: 40rpx;
    font-size: 34rpx;
    color: #FFFFFF;
  }

  .renwu-list {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 200rpx;
    margin: 40rpx 40rpx 0 20rpx;
  }

  .renwu-left {
    width: 80rpx;
    height: 80rpx;
    background-color: #007AFF;
    border-radius: 20rpx;
    margin: 0 20rpx;
  }

  .renwu-con {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 82%;
    color: #FFFFFF;
    font-size: 32rpx;
  }

  .zhuce {
    font-size: 24rpx;
    color: #787e94;
    margin: 4rpx 0;
  }

  .vtn-text {
    font-size: 24rpx;
    padding: 2rpx 16rpx;
    background-color: #1d2c45;
    border-radius: 20rpx;
  }
</style>
